<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.引入 ECharts 文件 -->
    <script src="./echarts/echarts.min.js"></script>
</head>

<body>
    <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">

        // 3.1 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.querySelector('#main'));

        // 3.2 指定图表的配置项和数据
        let option = {
            title: {
                text: '班级薪资分布',
                top: 15,
                left: 10,
                textStyle: {
                    fontSize: 16
                }
            },
            // 1.鼠标移入提示
            tooltip: {
                trigger: 'item'
            },
            // 2.顶部提示
            legend: {
                bottom: '6%',
                left: 'center'
            },
            // 3.图形颜色
            color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
            // 4.内容
            series: [
                {
                    name: '班级新资分布', // 系列名称，用于tooltip的显示
                    type: 'pie', // 图形类型'pie'固定代表饼状图
                    radius: ['40%', '70%'], // 饼图的半径(内圈, 外圈) 表示外半径为可视区尺寸（容器高宽中较小一项）的 20%
                    avoidLabelOverlap: true, // 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
                    itemStyle: { // 图形样式
                        borderRadius: 10, // 表示内圆角半径和外圆角半径
                        borderColor: '#fff', // 图形的描边颜色
                        borderWidth: 2 // 描边线宽(为0无描边)
                    },
                    label: { // 饼图图形上的文本标签(默认上来显示的, 鼠标移入是另外配置)
                        show: false, // 隐藏
                        position: 'center' // 让他们出现在中心
                    },
                    emphasis: { // 高亮状态的扇区和标签样式
                        label: { // 文本标签控制
                            show: true, // 显示
                            fontSize: '40', // 字体大小
                            fontWeight: 'bold' // 字体粗度
                        }
                    },
                    labelLine: { // 标签的视觉引导线配置(就是解释每块图形的文本标签连线)
                        show: false
                    },
                    data: [ // 系列数据
                        { value: 1048, name: '1万以下' },
                        { value: 735, name: '1-1.5万' },
                        { value: 580, name: '1.5万-2万' },
                        { value: 484, name: '2万以上' },
                    ]
                }
            ]
        }

        // 3.3使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    </script>
</body>

</html>